<template>
    <div>
        <!-- 导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/SystemHomePage' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
            <el-breadcrumb-item>房屋信息管理</el-breadcrumb-item>
            <el-breadcrumb-item>房屋信息表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片区域 -->
        <el-card>
            <el-row :gutter='40'>
                <el-col :span='8'>
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getHouseList">
                        <el-button slot="append" icon="el-icon-search" @click="getGrabble"></el-button>
                    </el-input>
                </el-col>
                <el-col :span='4'>
                    <el-button type='primary' @click="addDialogVisible = true">新增房屋</el-button>
                </el-col>
            </el-row>
               <!-- 房屋列表区 -->
            <el-table :data="currentPageData" stripe>
                <el-table-column label='#' type='index'></el-table-column>
                <el-table-column label='位置' prop='position'></el-table-column>
                <el-table-column label='房源' prop='resource'></el-table-column>
                <el-table-column label='面积/m^2' prop='area'></el-table-column>
                <el-table-column label='户型' prop='houseType'></el-table-column>
                <el-table-column label='价格(m^2/W)' prop='price'></el-table-column>
                <el-table-column label='状态' prop='state'></el-table-column>
                <el-table-column label='操作'>
                    <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" circle @click='updateHouseById(scope.row._id)'></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle @click='removeHouseById(scope.row._id)'></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pageNum"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
            <!-- 添加房屋 -->
            <el-dialog
            title="添加用户"
            :visible.sync="addDialogVisible"
            width="50%" @close="addDialogClosed">
                <!-- 内容主体 -->
                <el-form :model="addForm" status-icon :rules="addFormRules" ref="addForm" label-width="70px">
                    <el-form-item label="位置" prop="position">
                        <el-input v-model="addForm.position"></el-input>
                    </el-form-item>
                     <el-form-item label="房源" prop="resource">
                        <el-input v-model="addForm.resource"></el-input>
                    </el-form-item>
                     <el-form-item label="面积" prop="area">
                        <el-input v-model="addForm.area"></el-input>
                    </el-form-item>
                     <el-form-item label="户型" prop="houseType">
                        <el-input v-model="addForm.houseType"></el-input>
                    </el-form-item>
                    <el-form-item label="房屋图片" prop="picture">
                        <el-input v-model="addForm.picture"></el-input>
                    </el-form-item>
                    <el-form-item label="价格" prop="price">
                        <el-input v-model="addForm.price"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="state">
                        <el-input v-model="addForm.state"></el-input>
                    </el-form-item>
                </el-form>
                <!-- 按钮区 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addHouse">确 定</el-button>
                </span>
            </el-dialog>
             <!-- 修改用户 -->
            <el-dialog
            title="修改用户"
            :visible.sync="updateDialogVisible"
            width="50%" @close="updateDialogClosed">
                <!-- 内容主体 -->
                <el-form :model="updateForm" status-icon :rules="updateFormRules" ref="updateForm" label-width="70px">
                    <el-form-item label="位置" prop="position">
                        <el-input v-model="updateForm.position" :disabled="true"></el-input>
                    </el-form-item>
                     <el-form-item label="房源" prop="resource">
                        <el-input v-model="updateForm.resource" :disabled="true"></el-input>
                    </el-form-item>
                     <el-form-item label="面积" prop="area">
                        <el-input v-model="updateForm.area" :disabled="true"></el-input>
                    </el-form-item>
                     <el-form-item label="户型" prop="houseType">
                        <el-input v-model="updateForm.houseType"></el-input>
                    </el-form-item>
                    <el-form-item label="房屋图片" prop="picture">
                        <el-input v-model="updateForm.picture"></el-input>
                    </el-form-item>
                     <el-form-item label="价格" prop="price">
                        <el-input v-model="updateForm.price"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="state">
                        <el-input v-model="updateForm.state"></el-input>
                    </el-form-item>
                </el-form>
                <!-- 按钮区 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="updateDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateHouse">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        var checkTel = (rule,value,callback)=>{
            const regTel = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
            if (!regTel.test(value)) {
                callback( new Error('请输入合法手机号'))
            }else{
                callback()
            }  
        }
        return {
            queryInfo:{
                query : '',
                pageNum : 1,// 当前页数，默认为1
                pageSize : 5,// 每页显示数量
            },
            houseList:[],//所有数据
            currentPageData:[],//当前页显示内容
            total:1,//页面所有条数
            FuzzyQuery:null,
            addDialogVisible:false, //控制添加信息出现于隐藏
            updateDialogVisible:false,//控制修改信息出现于隐藏
            userID:'',
            addForm:{
                position: null,//位置
                resource: null,//房源
                area:null,//面积
                houseType:null,//户型
                state:null,//状态
                price:null,//价格
                picture:null,

            },  //添加表单
            updateForm:{
                id:null,
                position:null,
                resource:null,
                area:null,
                houseType:null,
                state:null,
                price:null,
            },  //修改表单
            addFormRules:{
                username:[
                    {
                        required:true,
                        message:'请输入用户名',
                        trigger:'blur',
                    }
                ],
                 password:[
                    {
                        required:true,
                        message:'请输入密码',
                        trigger:'blur',
                    }
                ],
                 Tel:[
                    {
                        required:true,
                        message:'请输入手机号',
                        trigger:'blur',
                    },
                    {
                        validator:checkTel,
                        trigger:'blur',
                    }
                ],
                 role:[
                    {
                        required:true,
                        message:'请输入职位名称',
                        trigger:'blur',
                    }
                ],
            },//添加表单验证规则对象
            updateFormRules:{
                username:[
                    {
                        required:true,
                        message:'请输入用户名',
                        trigger:'blur',
                    }
                ],
                 role:[
                    {
                        required:true,
                        message:'请输入职位名称',
                        trigger:'blur',
                    }
                ],
            },
        }
    },
   mounted() {
       this.getHouseList()
   },
    methods: {
        //显示房屋列表
        async getHouseList(){
           const {data:result} = await this.$http.get('HouseList',{params:this.queryInfo})
           if(!result.ret)return this.$message.error('获取房屋列表失败')
            this.houseList = result.data
            this.currentPageData = result.data
            //显示共多少条
            this.total = this.houseList.length
            this.handleSizeChange()
        },
        //房屋查询
        async getGrabble(){
            const getGrabbleValue = await this.$http.post('GrabbleHouse',{params:this.queryInfo.query})
            const FuzzyQuerydata = getGrabbleValue.data.data.GrabbleHouse
            if(FuzzyQuerydata != ''){
                this.currentPageData = FuzzyQuerydata
            }else{
                this.currentPageData = this.houseList
            }
        },
        //添加房屋
        addHouse(){
            this.$refs.addForm.validate(async valid=>{
               if(valid){
                    //发起添加请求
                    const  {data:result} =  await this.$http.post('HouseSignup',this.addForm)
                    console.log(result);
                    if (result.errorCode < 0) {
                            this.$Message.error('房屋添加失败')
                    }else{
                            this.$Message.success('房屋添加成功')
                            //隐藏添加用户对话框
                            this.addDialogVisible = false
                            //刷新列表
                            this.getHouseList()
                            this.addDialogClosed()
                    }
               }else{
                   this.$Message.error('房屋添加失败')
                   this.addDialogClosed()
                   return false
               }
            })
        },
          //修改房屋
        updateHouse(){
             this.$refs.updateForm.validate(async valid=>{
               if(valid){

                    //发起修改请求
                    const  {data:result} =  await this.$http.post('ModifyHouse',this.updateForm)
                    if (result.errorCode < 0) {
                            this.$Message.error('房屋修改失败')
                    }else{
                            this.$Message.success('房屋修改成功')
                            //隐藏添加用户对话框
                            this.updateDialogVisible = false
                            //刷新列表
                            this.getHouseList()
                            
                    }
               }else{
                   this.$Message.error('用户修改失败')
                   return false
               }
            })
        },
        // 获取想要删除值的id
        async removeHouseById(id){
            const confirmResult =  await this.$confirm('此操作将永久删除该房屋, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).catch(err => err);
            //如果用户删除返回字符串confirm,如果用户不删除则返回字符串cancel
            if (confirmResult !== "confirm") {
                return this.$Message.info("您已取消该操作")
            }else{
                //通过id进行查找删除
                const  {data:result} = await this.$http.delete('removeHouse',{data:{id}});
                if (result.errorCode !== 0) {
                    return this.$Message.error("删除失败")
                }else{
                    this.$Message.success("删除成功")
                    this.getHouseList()
                }
               
            }
        },
        //根据ID获取想要的值
        async updateHouseById(id){
            const  {data:result} = await this.$http.put('ListOneHouse',{id:id});
            this.updateForm.position = result.position,
            this.updateForm.resource = result.resource,
            this.updateForm.area = result.area,
            this.updateForm.houseType = result.houseType,
            this.updateForm.picture = result.picture,
            this.updateForm.state = result.state,
            this.updateDialogVisible = true
            this.updateForm.id = id
        },
        //监听pageSize改变是事件
        handleSizeChange(newSize){
            //获取当前页面共多少条信息
            if (newSize) {
                this.queryInfo.pageSize = newSize
            }else{
                this.queryInfo.pageSize
            }
            let begin = (this.queryInfo.pageNum - 1) * this.queryInfo.pageSize;
            let end = this.queryInfo.pageNum  * this.queryInfo.pageSize;
            this.currentPageData = this.houseList.slice(begin,end)
        },
        //监听页码值改变是事件
        handleCurrentChange(newPage){
            this.queryInfo.pageNum = newPage
            this.handleSizeChange(this.pageSize)
        },
        //监听添加用户对话框关闭事件
        addDialogClosed(){
            if(this.$refs.addForm!==undefined) {
               this.$refs.addForm.resetFields()
            }
        },
        //监听添加用户对话框关闭事件
        updateDialogClosed(){
            if(this.$refs.updateForm!==undefined) {
               this.$refs.updateForm.resetFields()
            }
        },
    }
} 
</script>
<style scoped>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

</style>